<template>
  <div class="flex width1200 margin-center mgt-20">
    <div class="navMenu">
      <div class="info">
        <el-image class="cover" :src="list  .img" fit="cover"></el-image>
        <p class="f16 bold mgt-15 mgb-5">{{list.name}}</p>
        <p class="mgb-15">{{list.organisation}}</p>
        <p class="tl">
          <i class="tag" v-if="list.tag!=''" :key='tagIndex' v-for='(tag,tagIndex) in list.tag.split(",")'>{{tag}}</i>
        </p>
        <div class="flex-center">
          <router-link to="/personal/collect" class="linkUrl"><span class="f16 bold ">10</span><span class="f12">收藏</span></router-link>
          <router-link to="/personal/focus" class="linkUrl"><span class="f16 bold ">10</span><span class="f12">关注</span></router-link>
          <router-link to="/personal/fans" class="linkUrl"><span class="f16 bold ">10</span><span class="f12">粉丝</span></router-link>
        </div>
      </div>
      <el-menu :default-active="activeIndex" :router="true" mode="horizontal" @select="handleSelect">
        <el-menu-item index="/personal/organization">我的组织</el-menu-item>
        <el-menu-item index="/personal/course">我的课程</el-menu-item>
        <el-menu-item index="/personal/teacher">名师功能</el-menu-item>
      </el-menu>
    </div>
    <div class="box flex1">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "/personal/collect",
      headImg: require("../../assets/img/图层 678@2x.png"),
      list: {
        img: require("../../assets/img/图层 10 拷贝@2x.png"),
        name: "李焦",
        sex: "女",
        organisation: "成都市泡桐树小学",
        tag: "名师认证,红色教育授课金奖,成都市优秀班主任",
        date: "2021-03-10",
      },
    };
  },
  methods: {
    created() {
      this.activeIndex = this.$router.path;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="less" scoped>
// @import "../assets/css/variable.less";
.navMenu {
  margin-right: 20px;
  width: 224px;
  background: #ffffff;
  .info {
    padding: 30px 20px;
    text-align: center;
    box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
    .cover {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
    }
    .linkUrl {
      display: flex;
      flex-direction: column;
      flex: 1;
      color: #333;
      &:active,
      &:focus,
      &:visited {
        color: #333;
      }
      &:focus {
        outline: none;
        border: none;
      }
      &.router-link-active {
        font-size: 16px;
      }
    }
  }
  /deep/.el-menu.el-menu--horizontal {
    border: 0;
    margin-top: 20px;
    box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
    border-radius: 1px;
  }
  /deep/ .el-menu--horizontal > .el-menu-item {
    float: none;
    height: 50px;
    line-height: 50px;
    border: none;
  }
  /deep/ .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 0;
    font-weight: bold;
    font-size: 16px;
  }
}
.box {
  box-sizing: border-box;
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
  border-radius: 7px 7px 7px 7px;
}
</style>